// 函数组件
import "./css/Finance.less"
import { DatePicker, Space, Badge, Descriptions } from 'antd';
import React, { useEffect,useState } from 'react';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
import {getFinance} from "../../../api/financeApi";
import { log } from "console";
interface OrderType {
    saleAmount:number,
    invalidOrderAmount:string,
    invalidOrderNum:string,
    effectiveOrderNum:number,
    effectiveOrderAmount:number,
    doneOrderAmount:number,
    doneOderNum:number
}
interface VipType {
    averageBuy:number,
    averageOrderNum:string,
    effectiveOrderUser:string,
    userNum:number,
    userOderAmount:number,
    userOrderNum:number,
    buyPercentage:string
}
function SynthesizeFinance() {
    const { RangePicker } = DatePicker;
    const [nowTime,setNowTime] = useState<number>(1) //当前显示界面
    const [orderList,setOrderList] = useState<OrderType>() //装订单信息
    const [vipList,setVipList] = useState<VipType>() //装会员信息
    const [maxTime,setMaxTime] = useState<string>()
    const [minTime,setMinTime] = useState<string>()
    useEffect(()=>{
        getFinance({}).then(res=>{
            console.log('所有信息',res.data);
            setOrderList(res.data.order)
            setVipList(res.data.vip)
        }).catch(err=>{
            console.log('所有信息',err);
        })
        
    },[])
    const onChange = (
        value: DatePickerProps['value'] | RangePickerProps['value'],
        dateString: [string, string] | string,
    ) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        setMinTime(dateString[0])
        setMaxTime(dateString[1])
        getFinance({maxTime:maxTime,minTime:minTime}).then(res=>{
            console.log('所有信息',res.data);
            setOrderList(res.data.order)
            setVipList(res.data.vip)
        }).catch(err=>{
            console.log('所有信息',err);
        })
    };

    const changeTime=(e:number)=>{
        console.log(minTime,maxTime);
        
        setNowTime(e)
        if(e==2){
            getFinance({recentDay:30}).then(res=>{
                console.log('所有信息',res.data);
                setOrderList(res.data.order)
                setVipList(res.data.vip)
            }).catch(err=>{
                console.log('所有信息',err);
            }) 
        }
        if(e==3){
            getFinance({recentDay:90}).then(res=>{
                console.log('所有信息',res.data);
                setOrderList(res.data.order)
                setVipList(res.data.vip)
            }).catch(err=>{
                console.log('所有信息',err);
            }) 
        }
    }
    return (
        <div className='SynthesizeFinance'>
            {/* 头部 */}
            <div className='page-top'>
                {/* 左边标题 */}
                <div className='page-title'>
                    <p>综合统计</p>
                </div>
            </div>
            {/* 内容区 */}
            <div className='page-context'>
                {/* 数据表部分 */}
                <div className='data-list'>
                    {/* 上部文字 */}
                    <div className='list-text'>
                        <p>数据列表</p>
                        <div>
                            <button className={nowTime==1 ?'blue':''} onClick={()=>changeTime(1)}>全部</button>
                            <button className={nowTime==2 ?'blue':''} onClick={()=>changeTime(2)}>最近30天</button>
                            <button className={nowTime==3 ?'blue':''} onClick={()=>changeTime(3)}>最近90天</button>
                            <Space direction="vertical" size={12} >
                                <RangePicker renderExtraFooter={() => 'extra footer'} showTime onChange={onChange} />
                            </Space>
                        </div>
                    </div>
                    {/* 表格数据 */}
                    <div className="table-context">
                        <Descriptions title="订单统计" bordered size='small' column={1}>
                            <Descriptions.Item label="销售总额">{orderList?.saleAmount}</Descriptions.Item>
                            <Descriptions.Item label="有效订单总数">{orderList?.effectiveOrderNum}</Descriptions.Item>
                            <Descriptions.Item label="有效订单总额">{orderList?.effectiveOrderAmount}</Descriptions.Item>
                            <Descriptions.Item label="无效订单总数（取消或超时关闭）">{orderList?.invalidOrderNum}</Descriptions.Item>
                            <Descriptions.Item label="无效订单总额">{orderList?.invalidOrderAmount}</Descriptions.Item>
                            <Descriptions.Item label="已成交订单总数">{orderList?.doneOderNum}</Descriptions.Item>
                            <Descriptions.Item label="已成交订单综合">{orderList?.doneOrderAmount}</Descriptions.Item>
                        </Descriptions>
                        <Descriptions title="会员统计" bordered size='small' column={1} style={{ marginTop: '20px' }}>
                            <Descriptions.Item label="用户总数">{vipList?.userNum}</Descriptions.Item>
                            <Descriptions.Item label="有订单用户">{vipList?.effectiveOrderUser}</Descriptions.Item>
                            <Descriptions.Item label="用户订单总数">{vipList?.userOrderNum}</Descriptions.Item>
                            <Descriptions.Item label="用户购物总额">{vipList?.userOderAmount}</Descriptions.Item>
                            <Descriptions.Item label="用户购买率">{vipList?.buyPercentage}</Descriptions.Item>
                            <Descriptions.Item label="用户平均订单数">{vipList?.averageOrderNum}</Descriptions.Item>
                            <Descriptions.Item label="用户平均购物额">{vipList?.averageBuy}</Descriptions.Item>
                        </Descriptions>
                    </div>

                </div>
            </div>
        </div>
    )
}

export default SynthesizeFinance